<template>
	<view class="container">
		<view class="header">
			<view class="header-title">
				AI辅助创作
			</view>
			<view class="oneWorld">
				灵感来源、文思涌现
			</view>
		</view>
		<view class="card">
			<!-- 选择模板 -->
			<view class="select-template">
				<view class="select-header" bindtap="setPopup">
					<view class="select-header-title">选择引擎</view>
					<view class="nowSelect" @click="others">其他引擎<image src="../../static/right (1).png"></image>
					</view>
				</view>
				<view class="template-list" v-for="(item, index) in list" :key="index" @click="dianji(index,item)">

					<view class="item" :class="index == active ? 'current' : ''">
						<image v-if="index == active" src="../../static/select.png"></image>
						<image v-if="index != active" src="../../static/noSelect.png"></image>
						<view class="template-name">
							{{item.title}}
						</view>
					</view>
					<!-- <view class="item no">女友道歉</view> -->
				</view>
			</view>
			<view class="line"></view>
			<!-- 填写信息 -->
			<view class="topic" id="search">
				<view class="title">
					文章主题
				</view>
				<input id="topic" @blur="inputFocus('topic')" @focus="inputFocus('topic')"
					:class="isFocus.topic?'input getFocus':'input'" placeholder="想一个有趣的主题,比如小红？"
					v-model="params.topic " />
			</view>
			<view class="number">
				<view class="title">
					文章字数
				</view>

				<input id="number" @blur="inputFocus('number')" @focus="inputFocus('number')"
					:class="isFocus.number?'input getFocus':'input'" placeholder="文章预期字数(仅能输入数字)"
					v-model.number="params.wordsNumber" @input="onInput" />
			</view>
			<view class="btn">
				<button @click="toArticleShow()">立即创作</button>
			</view>

		</view>


	</view>
</template>

<script>
	import {
		getTemplateList,
		makeArticle
	} from '../../request/api.js'
	export default {
		data() {
			return {
				isTopic: false,
				active: 0,
				title: 'Hello',
				list: [{
						title: "表白情书",
						id: "1",
					},
					{
						title: "关于友谊的散文",
						id: "3",
					},
				],
				getFocus: {
					topic: false,
					number: false
				},
				params: {
					uid: '',
					temid: '',
					topic: '',
					wordsNumber: ''
				},
				// 输入框获得焦点的样式
				isFocus: {
					topic: false,
					number: false
				},
			}
		},
		onShow() {
			let demo = uni.getStorageSync('demo');
			if (demo) {
				this.list = demo
			} else {
				uni.setStorageSync('demo', this.list);
			}


		},

		methods: {
			// 输入框焦点
			inputFocus(type) {
				// console.log(e)
				this.isFocus[type] = !this.isFocus[type];
			},
			toArticleShow() {
				if(this.params.topic=='' || this.params.wordsNumber == ''){
					return uni.showToast({
						title:'参数为空或格式错误',
						icon:'error'
					})
				}
				if (this.params.temid === '') {
					this.params.temid = this.list[0].id
				}
				let uid = uni.getStorageSync('uid');
				this.params.uid = uid
				console.log('11', this.params);
				// makeArticle(this.params).then(res => {
				// 	console.log(res);
				// })
				uni.setStorageSync('params', this.params);
				uni.navigateTo({
					url: '../article/article',
					fail(error) {
						console.log(error)
					}
				})
			},
			dianji(index, item) {
				this.active = index;
				// console.log(this.active,item);
				this.params.temid = item.id
				console.log(this.params);
			},
			others() {
				uni.navigateTo({
					url: '../demo/demo',
					fail(error) {
						console.log(error)
					}
				})
			},
			// 输入框数字限制
			 onInput(event) {
			      let value = event.target.value;
			      // 替换非数字字符
			      value = value.replace(/[^\d.-]/g, '');
			      this.params.wordsNumber = value;
			    }



		}
	}
</script>

<style lang="less" scoped>
	/**index.wxss**/

	.container {
		padding-top: 30rpx;
		padding-bottom: 120rpx;
	}




	/* 头部 */

	.header {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 145rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
		padding-bottom: 15rpx;
	}

	.header .header-title {
		color: rgba(0, 0, 0, 1);
		font-size: 40rpx;
		font-weight: 700;
	}

	.header .oneWorld {
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.45);
		margin-top: 7rpx;
	}

	.card {
		margin: 40rpx;
	}

	.select-header {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
	}

	.select-header-title {
		font-size: 40rpx;
		margin: 25rpx 0;
		color: rgba(0, 0, 0, 1);
		font-weight: 600;
	}

	.nowSelect {
		display: flex;
		font-size: 30rpx;
		color: rgba(0, 0, 0, 0.45);
	}

	.nowSelect image {
		width: 42rpx;
		height: 42rpx;
	}

	.title {
		font-size: 40rpx;
		margin: 30rpx 0;
		color: rgba(0, 0, 0, 1);
		font-weight: 600;
	}

	.template-list {
		display: inline-block;
		/* height: 0; */
		transition: all .2s;
		overflow: hidden;
	}

	.template-list .item {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding: 30rpx 40rpx;
		border-radius: 10px;
		background-color: #2a82e447;
		color: #6eb0f0;
		// border: 2px solid rgba(0, 0, 0, 0.06);
		margin-right: 20rpx;
		// display: inline-block;
		font-size: 30rpx;
		margin: 5px 20rpx 20rpx 0;
		transition: all .2s;
	}

	.template-name {
		margin-top: 20rpx;
	}

	.template-list image {
		width: 30px;
		height: 30px;
	}

	.current {
		background-color: #2a82e4 !important;
		color: #fff !important;
		box-shadow: #2a82e445 0px 8px 24px;
		/* background-color: #1459f1d6 !important; */
		// border: 2px solid #2a82e4 !important;
	}

	.input {
		padding: 35rpx;
		border-radius: 30rpx;
		margin-bottom: 40rpx;
		background-color: rgba(0, 0, 0, 0.04);
		border: 4rpx solid rgba(0, 0, 0, 0);
		transition: all .2s;
	}

	.input:focus {
		border: 4rpx solid #2a82e4;
		background-color: #fff;
	}

	.getFocus {
		border: 4rpx solid #2a82e4;
		background-color: #fff;
	}

	.btn {
		margin: 60rpx 0 40rpx 0;
		color: #fff;
		border-radius: 10rpx;
	}

	.btn button {
		height: 110rpx;
		line-height: 110rpx;
		color: #fff;
		font-size: 34rpx;
		/* background-color: #1459F1; */
		border-radius: 15px;
		background: #2a82e4;
		/* margin-top: 40rpx; */
	}

	.ai {
		display: flex;
		background-color: rgba(48, 184, 157, 0.231);
		border-radius: 15rpx;
		padding: 30rpx 30rpx;
		align-items: center;
	}

	.ai-icon {
		display: flex;
		align-items: center;
		height: 100%;
	}

	.ai-icon image {
		width: 95rpx;
		height: 95rpx;
		margin-left: 15rpx;
	}

	.ai-text {
		flex: 1;
		padding-left: 45rpx;
		color: #fff;
	}

	.ai-title {
		font-weight: 700;
		color: rgba(48, 184, 157, 1);
		font-size: 40rpx;
	}

	.ai-content {
		color: #0000005b;
		font-size: 28rpx;
		margin-top: 10rpx;
	}

	.ai-enter {
		width: 60rpx;
		height: 60rpx;
	}


	/* 弹出层 */

	.popup-content {
		padding: 40rpx;
	}

	.popup-header {
		display: flex;
		height: 80rpx;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
		padding-bottom: 15rpx;
	}

	.popup-header-title {
		font-size: 35rpx;
		font-weight: 600;
	}

	.popup-header image {
		width: 45rpx;
		height: 45rpx;
		padding: 10rpx;
	}

	.popup-templateList {
		margin: 40rpx 0;
	}

	.popup-templateList .item {
		position: relative;
		padding: 25rpx 40rpx;
		border-radius: 27.5px;
		border: 2px solid rgba(0, 0, 0, 0.06);
		margin-right: 20rpx;
		display: inline-block;
		font-size: 30rpx;
		margin: 10rpx 20rpx 20rpx 0;
		transition: all .2s;
	}

	.popup-templateList .item .delete {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: -20rpx;
		right: -12rpx;
		height: 44rpx;
		width: 44rpx;
		color: #fff;
		border-radius: 50%;
		background-color: rgba(212, 48, 48, 1);
		font-size: 30rpx;
	}

	.popup-getMore {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		color: rgba(0, 0, 0, 0.65);
		font-size: 32rpx;
		text-align: center;
		border-radius: 15px;
		background: rgba(0, 0, 0, 0.06);
		/* margin-bottom: 120rpx; */
	}


	/* 公告 */

	.notice-content {
		margin: 40rpx 0;
		font-size: 34rpx;
	}

	.check-me {
		width: 100%;
		height: 110rpx;
		line-height: 110rpx;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		border-radius: 15px;
		background: rgba(48, 184, 156, 1);
	}

	.awaitMe {
		width: 100%;
		height: 80rpx;
		line-height: 110rpx;
		color: rgba(0, 0, 0, 0.45);
		font-size: 32rpx;
		text-align: center;
		border-radius: 15px;
		/* background: rgba(48, 184, 156, 1); */
		/* margin-bottom: 120rpx; */
	}
</style>
